---
name: Toggle
menu: 1. State Containers
---

import { Props, Prop, ChildrenProps, ChildrenProp } from '../_ui/PropsTable'
import { Toggle } from '../../dist/react-powerplug.esm'

# Toggle

The Toggle component is used to toggle a boolean. True/false.


## Usage

```js
import { Toggle } from 'react-powerplug'
```

```jsx
<Toggle initial={false}>
  {({ on, toggle }) => (
    <Checkbox onClick={toggle} checked={on} />
  )}
</Toggle>
```

## Props

<Props>
  <Prop name="initial" type="boolean" default={false}>
    Specifies the initial `on` state.
  </Prop>
  <Prop name="onChange" type="function">
    The onChange event of the Toggle is called whenever the on state changes.
  </Prop>
  <Prop name="children" type="function">
    Receive state as function. It can also be `render` prop.
  </Prop>
</Props>

## Children Props

<ChildrenProps>
  <ChildrenProp name="on" type="boolean">
    Your `on` state value
  </ChildrenProp>
  <ChildrenProp name="toggle" type="function">
    Toggle your `on` state value
  </ChildrenProp>
  <ChildrenProp name="set" type="function">
    Arbitrary set a value to `on` state
  </ChildrenProp>
  <ChildrenProp name="setOn" type="function">
    Set `on` value to true
  </ChildrenProp>
  <ChildrenProp name="setOff" type="function">
    Set `on` value to false
  </ChildrenProp>
  <ChildrenProp name="reset" type="function">
    Reset `on` to initial state
  </ChildrenProp>
</ChildrenProps>
